<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8">
    <title>jQuery-emoji by eshengsky</title>
    <!--the css for jquery.mCustomScrollbar-->
    <link rel="stylesheet" href="lib/css/jquery.mCustomScrollbar.min.css" />
    <!--the css for this plugin-->
    <link rel="stylesheet" href="dist/css/jquery.emoji.css" />
    <!-- <link rel="stylesheet" href="lib/css/railscasts.css"/> -->
    <link rel="stylesheet" href="dist/css/index.css" />
</head>

<body>
    <section class="main-content container">
        <div class="row m-t-20">
            <div class="col-md-6">
                <h4>可编辑div editable div</h4>
                <div id="editor" contenteditable="true"></div>
                <button id="btn" class="btn btn-sm btn-default">:)</button>
                <div class="m-t-70">
                    <button class="btn btn-primary m-t-70" id="btnLoad2">加载表情 load emoji</button>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row m-t-20">
            <div class="col-md-6">
                <h4>文本转换 text parse</h4>
                <div class="panel panel-default" id="sourceText">
                    <div class="panel-body">
                        <span>It's a:taiyang:day, :xxx: I had a:chabei:, and feel nice~#qq_14#</span>
                    </div>
                </div>
                <div class="m-t-70">
                    <button class="btn btn-primary" id="btnParse">转换 parse</button>
                </div>
            </div>
        </div>
    </section>
    <!--the js for jquery-->
    <script src="lib/script/jquery.min.js"></script>
    <!--(Optional) the js for jquery.mCustomScrollbar's addon-->
    <script src="lib/script/jquery.mousewheel-3.0.6.min.js"></script>
    <!--the js for jquery.mCustomScrollbar-->
    <script src="lib/script/jquery.mCustomScrollbar.min.js"></script>
    <!--the js for this plugin-->
    <script src="dist/js/jquery.emoji.min.js"></script>
    <script>
        $(function () {
            $("#editor").emoji({
                button: "#btn",
                showTab: false,
                animation: 'slide',
                icons: [{
                    name: "QQ表情",
                    path: "dist/img/qq/",
                    maxNum: 91,
                    excludeNums: [41, 45, 54],
                    file: ".gif",
                    placeholder: "#qq_{alias}#"
                }]
            });
        })

        // $("#btnParse").click(function () {
        //     $("#sourceText").emojiParse({
        //         icons: [{
        //             path: "dist/img/tieba/",
        //             file: ".jpg",
        //             placeholder: ":{alias}:",
        //             alias: {
        //                 1: "hehe",
        //                 2: "haha",
        //                 3: "tushe",
        //                 4: "a",
        //                 5: "ku",
        //                 6: "lu",
        //                 7: "kaixin",
        //                 8: "han",
        //                 9: "lei",
        //                 10: "heixian",
        //                 11: "bishi",
        //                 12: "bugaoxing",
        //                 13: "zhenbang",
        //                 14: "qian",
        //                 15: "yiwen",
        //                 16: "yinxian",
        //                 17: "tu",
        //                 18: "yi",
        //                 19: "weiqu",
        //                 20: "huaxin",
        //                 21: "hu",
        //                 22: "xiaonian",
        //                 23: "neng",
        //                 24: "taikaixin",
        //                 25: "huaji",
        //                 26: "mianqiang",
        //                 27: "kuanghan",
        //                 28: "guai",
        //                 29: "shuijiao",
        //                 30: "jinku",
        //                 31: "shengqi",
        //                 32: "jinya",
        //                 33: "pen",
        //                 34: "aixin",
        //                 35: "xinsui",
        //                 36: "meigui",
        //                 37: "liwu",
        //                 38: "caihong",
        //                 39: "xxyl",
        //                 40: "taiyang",
        //                 41: "qianbi",
        //                 42: "dnegpao",
        //                 43: "chabei",
        //                 44: "dangao",
        //                 45: "yinyue",
        //                 46: "haha2",
        //                 47: "shenli",
        //                 48: "damuzhi",
        //                 49: "ruo",
        //                 50: "OK"
        //             }
        //         }, {
        //             path: "dist/img/qq/",
        //             file: ".gif",
        //             placeholder: "#qq_{alias}#"
        //         }]
        //     });
        // });
    </script>
</body>

</html>